<script setup lang="ts">
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";

// 方向
const subjects = reactive([
  {
    id: 1,
    name: "web前端",
  },
  {
    id: 0,
    name: "Java",
  },
]);

// 搜索
// const searchFormRef = ref<FormInstance>();
// const searchCondition = reactive({
//   class: "",
//   username: "",
//   subject: "",
// });
// const onSearchSubmit = () => {
//   console.log("submit!");
// };
// const resetSearchForm = (formEl: FormInstance | undefined) => {
//   if (!formEl) return;
//   formEl.resetFields();
// };

// 新增部门
const onAddDepartment = () => {};

// 表格部分
const departmentList = reactive([
  // {
  //   name: "前端",
  //   no: "331",
  //   num: 6,
  //   leader: "郝文韬",
  // },
  // {
  //   name: "java",
  //   no: "302",
  //   num: 6,
  //   leader: "张大科",
  // },
]);

// 分页
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

<template>
  <main>
    <div class="page-header">
      <div class="page-title">
        <p>部门管理</p>
      </div>
    </div>
    <div class="page-body">
      <!-- 搜索 -->
      <!-- <div class="search">
        <el-form
          ref="searchFormRef"
          :inline="true"
          :model="searchCondition"
          class="demo-form-inline"
        >
          <el-form-item label="部门编号">
            <el-input
              v-model="searchCondition.class"
              style="width: 100px"
              size="small"
            />
          </el-form-item>
          <el-form-item label="方向">
            <el-select
              v-model="searchCondition.subject"
              class="m-2"
              size="small"
              style="width: 100px"
            >
              <el-option
                v-for="item in subjects"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="onSearchSubmit"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              @click="resetSearchForm(searchFormRef)"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div> -->

      <!-- 批量操作 -->
      <div class="batch-processing">
        <!-- <el-button link @click="onAddDepartment">新增部门</el-button> -->
      </div>

      <!-- 列表 -->
      <div class="student-list">
        <el-table :data="departmentList" stripe border style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column label="序号" width="55">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="方向编号" width="90" />
          <el-table-column prop="no" label="方向名称" width="90" />
          <el-table-column prop="num" label="方向人数" width="90" />
          <el-table-column prop="leader" label="方向负责人" width="100" />
          <el-table-column label="操作">
            <template #default>
              <el-button link size="small">查看</el-button>
              <el-button link size="small">编辑</el-button>
              <el-button link size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="1"
        class="mt-4"
        @current-change="handleCurrentChange"
      />
    </div>
  </main>
</template>

<style lang="scss">
.student-list {
  padding: 20px 0;
}
</style>
